<template>
  <div class="flex flex-col h-full p-4">
    <!-- 返回按钮与标题 - 悬浮在页面组件顶部 -->
    <div class="absolute top-0 left-0 right-0 bg-white z-10 shadow-md py-4 px-6 flex items-center mb-6">
      <el-button @click="goBack" class="mr-2" text>
        <LsiconArrowLeftFilled class="mr-1 text-2xl text-black" />
      </el-button>
      <h2 class="text-xl font-bold">Pack {{ batteryPackSN }}</h2>
    </div>

    <div class="mt-16 flex-1 flex flex-col bg-white rounded-lg shadow p-6 overflow-y-auto">
      <!-- 电池基本信息 -->
      <div class="mb-6">
        <h3 class="text-lg font-bold mb-4">Battery Information</h3>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 p-4 border rounded">
          <div class="flex items-center">
            <span class="text-gray-500 mr-2">Battery Pack SN:</span>
            <span>{{ batteryDetail?.batteryPackSN || "-" }}</span>
          </div>
          <div class="flex items-center">
            <span class="text-gray-500 mr-2">Device SN:</span>
            <span>{{ batteryDetail?.deviceSN || "-" }}</span>
          </div>
          <div class="flex items-center">
            <span class="text-gray-500 mr-2">Fault Status:</span>
            <el-tag :type="batteryDetail?.faultStatus === 'Normal' ? 'success' : 'danger'
              " size="small">
              {{ batteryDetail?.faultStatus || "Normal" }}
            </el-tag>
          </div>
          <div class="flex items-center">
            <span class="text-gray-500 mr-2">Battery Type:</span>
            <span>{{ batteryDetail?.batteryType || "-" }}</span>
          </div>
          <div class="flex items-center">
            <span class="text-gray-500 mr-2">Capacity:</span>
            <span>2.4 kWh</span>
          </div>
        </div>
      </div>

      <!-- 监控选项卡 -->
      <div class="flex gap-3 mb-4">
        <CustomTabs v-model="monitoringType" :tabs="monitoringTabs" class="mb-4" />

        <div class="flex items-center gap-2 mb-4">
          <div
            class="flex items-center gap-2 border border-transparent rounded-full p-1 hover:border-black/30 cursor-pointer transition-all duration-300"
            @click="prevDate">
            <UiwLeft class="text-base text-black/50" />
          </div>
          <el-date-picker v-model="selectedDate" type="date" placeholder="Select Date" format="YYYY-MM-DD" />
          <div
            class="flex items-center gap-2 border border-transparent rounded-full p-1 hover:border-black/30 cursor-pointer transition-all duration-300"
            @click="nextDate">
            <UiwRight class="text-base text-black/50" />
          </div>
        </div>
      </div>

      <!-- 监控内容区域 -->
      <div class="monitoring-content">
        <!-- 历史数据图表 -->
        <HistoricalCharts v-if="monitoringType === 'historical'" :selected-date="selectedDate" />

        <!-- 实时监控 -->
        <RealtimeMonitoring v-else-if="monitoringType === 'realTime'" />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, computed } from "vue";
import { useRoute, useRouter } from "vue-router";
import LsiconArrowLeftFilled from "~icons/lsicon/arrow-left-filled";
import UiwLeft from "~icons/uiw/left";
import UiwRight from "~icons/uiw/right";
import CustomTabs from "@/components/CustomTabs/index.vue";
import HistoricalCharts from "./HistoricalCharts.vue";
import RealtimeMonitoring from "./RealtimeMonitoring.vue";
import type { BatteryPackItem } from "../../data";
import { mockBatteryPacks } from "../../data";

const route = useRoute();
const router = useRouter();

// 获取电池SN
const batteryPackSN = computed(() => route.params.id as string);

// 监控类型
const monitoringType = ref("realTime");
const selectedDate = ref(new Date());

// 监控选项卡配置
const monitoringTabs = [
  {
    name: "realTime",
    label: "Real-time Monitoring"
  },
  {
    name: "historical",
    label: "Historical Data"
  }
];

// 日期切换函数
const prevDate = () => {
  const date = new Date(selectedDate.value);
  date.setDate(date.getDate() - 1);
  selectedDate.value = date;
};

const nextDate = () => {
  const date = new Date(selectedDate.value);
  date.setDate(date.getDate() + 1);
  selectedDate.value = date;
};

// 获取电池详情
const batteryDetail = ref<BatteryPackItem | null>(null);

// 加载电池详情数据
onMounted(() => {
  // 在实际应用中，这里应该发送API请求获取详情
  batteryDetail.value =
    mockBatteryPacks.find(item => item.batteryPackSN === batteryPackSN.value) ||
    null;
});

// 返回上一页
const goBack = () => {
  router.push("/battery-pack-monitoring");
};
</script>

<style scoped>
.monitoring-content {
  /* 可以在这里添加监控内容区域的样式 */
}
</style>
